これからはじめるGulp #8：delモジュールとvinyl-pathsモジュールを使ったファイルの削除

はじめに

前回のこれからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割でパスを整理してrequire-dirモジュールを使いタスク単位のファイル分割を試しました。今回はdelモジュールとvinyl-pathsモジュールを使ったファイルの削除方法について勉強します。

ファイルやディレクトリを削除するdelモジュール

delモジュールはパスのパターン（glob）を使って複数のファイルやディレクトリを削除できます。globを配列に入れて渡せるので簡単に利用できます。

delモジュールのインストール

$ sudo npm install --save-dev del
Password:

> [email protected] install /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
[email protected] node_modules/del
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

delモジュールを使ったファイル削除

delモジュールはStringをそのまま渡すかglobを配列に入れて渡すかのどちらかでファイルを削除できます。このように簡単にファイルを削除できます。

var del = require('del');

gulp.task('del', function(){
  del('directory');
  //del(['a', 'b', 'c'])
});

ご覧の通りdelモジュールだけではパイプラインでは使えません。後述のvinyl-pathsモジュールと合わせて使うとパイプラインで使えるようになります。

vinyl-pathsモジュールを使いパイプラインでdelを実行する

vinyl-pathsを使うことでパイプライン上のglobを取得したり、引数にdelモジュールを渡してdelを実行してくれる便利なモジュールです。

今回はprodディレクトリの中身をtmpディレクトリにコピーしそれを5秒後に削除するタスクを作ります。5秒後に処理するためにもうひとつgulp-waitというGulpプラグインを使います。

vinyl-pathsのインストール

$ sudo npm install --save-dev vinyl-paths
Password:

> [email protected] install /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
[email protected] node_modules/vinyl-paths
└── [email protected] ([email protected], [email protected])

waitプラグインのインストール

$ sudo npm install gulp-wait --save-dev
Password:
[email protected] node_modules/gulp-wait
└── [email protected]

モジュールとプラグインを読み込む

インストールが済んだらdel, vinyl-pathsモジュールとgulp-waitプラグインを読み込みます。

var gulp       = require('gulp');
var path       = require('path');
var del        = require('del'); //<-
var vinylPaths = require('vinyl-paths'); //<-

//require tasks
var requireDir = require('require-dir');
var dir        = requireDir('./tasks', {recurse: true});

//gulp-plugin
var wait       = require('gulp-wait'); //<-
var connect    = require('gulp-connect');

//option
var paths = {
  srcDir : 'src',
  dstDir : 'prod'
}

ファイルをコピーして一時ファイルを作るタスク

vinyl-pathsを使った削除を試すために一時ファイルを作ります。一時ファイルはprodディレクトリの中身をtmpにコピーしたものを使います。コピーが終わってから後ほど作る削除タスクを実行したいので同期処理になるようreturnを使います。

gulp.task('copy:tmp', function(){
  var srcGlob = paths.dstDir + '/**/*';
  var dstGlob = 'tmp';

  return gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob ));
});

より複雑な同期処理を行いたい場合はこちらgulpのタスクを同期的に実行する方法がとてもわかりやすく説明されています。

コピーしたファイルをディレクトリごと削除するタスク

削除タスク（del）を作ります。delタスクはcopy:tmpの後に処理させます。パイプラインにdelayを設定しファイルがコピーされていることを確認し、5秒後にvinylPaths()にdelモジュールを渡して削除を実行します。

gulp.task('del', ['copy:tmp'], function(){
  var srcGlob = 'tmp';
  var delay   = 5000;

  gulp.src( srcGlob )
    .pipe(wait( delay ))
    .pipe(vinylPaths( del ));
});

削除タスクを実行

実行するとディレクトリとファイルがコピーされ5秒後にtmpディレクトリが削除されます。

$ gulp del
[16:18:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[16:18:46] Starting 'copy:tmp'...
[16:18:46] Finished 'copy:tmp' after 17 ms
[16:18:46] Starting 'del'...
[16:18:46] Finished 'del' after 4.4 ms

複数のディレクトリを削除する

複数のディレクトリを削除したい時はdelタスクで配列にしたglobを指定します。

gulp.task('copy:tmp', function(){
  var srcGlob  = paths.dstDir + '/**/*';
  var dstGlob1 = 'tmp1';
  var dstGlob2 = 'tmp2';
  var dstGlob3 = 'tmp3';
  var dstGlob4 = 'tmp4';

  return gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob1 ))
    .pipe(gulp.dest( dstGlob2 ))
    .pipe(gulp.dest( dstGlob3 ))
    .pipe(gulp.dest( dstGlob4 ));
});

gulp.task('del', ['copy:tmp'], function(){
  var srcGlob = ['tmp1', 'tmp2', 'tmp3', 'tmp4'];
  var delay   = 5000;

  gulp.src( srcGlob )
    .pipe(wait( delay ))
    .pipe(vinylPaths( del ));
});

まとめ

ファイルの削除とシンプルな同期実行を試すことができました。これで概ね基本的な処理を覚えられたと思います。明日はgulp-ruby-sassを使ってみたいと思います。

参考サイト

• Delete files and folders

この記事はこれからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除の転載記事です。